<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
#div1{ 
       width:300px; 
	   height:300px;
	   background:#F33;
	   position:relative;
	   left:-300px;
	   top:0;
	   }
#div1 span{ 
           width:50px; 
		   height:50px; 
		   position:absolute;
		   left:300px; 
		   top:125px;  
		   background:#4f88c8;
		   text-align:center;
		   line-height:50px
		   }
</style>
 <script>
 window.onload=function()
{
	var oDiv=document.getElementById('div1');//获得元素
	    
		oDiv.onmouseover=function()//移入事件
		{
			startMove(0);
			}
			oDiv.onmouseout=function()//移出事件
		{
			startMove(-300);
			}
	}
	timer=null;
	function startMove(iTarget){//定义函数
        clearInterval(timer);   //清空事件以免重复触发
        var oDiv=document.getElementById('div1');//函数内获取元素
		timer=setInterval(function(){   //定义定时器
		var speed=0;                            //定义速度属性
		if(oDiv.offsetLeft>iTarget)           //判断当前的left值与目标值的关系
		{
			speed=-10;                         //大于目标值速度则是负值
		}
		else
		{
			speed=10;                          //否则速度则是正值
		}
		if(oDiv.offsetLeft==iTarget)           //等于目标值则停止运动
		{
			clearInterval(timer)               //清空定时器
		}
		else{
			oDiv.style.left=oDiv.offsetLeft+speed+"px";    //运动速度
		}
			
		},30)
	}
</script>
</head>

<body>
<div id="div1"><span id="share">分享</span></div>

</body>
</html>
